import { DictValueEnum } from "@/components/DictTag";
import IconFont from "@/components/IconFont";
import IconModal from "@/components/ProSelectIcon/components/IconModal";
import Icon, * as antIcons from "@ant-design/icons";
import {
	DrawerForm,
	ModalForm,
	ProForm,
	ProFormDigit,
	ProFormInstance,
	ProFormRadio,
	ProFormSelect,
	ProFormText,
	ProFormTreeSelect
} from "@ant-design/pro-components";
import React, { useEffect, useMemo, useState, useRef } from "react";
export type MenuFormData = Record<string, unknown> & Partial<API.Setting.Menu>;
import { DIYIconList } from "@/components/ProSelectIcon/components/constants";
import { getListByAppId, getMenu } from "@/services/api/module/system/menu";
import { formTitle } from "../constants";
import { getAppList } from "@/services/api/module/system/application";
export type MenuFormProps = {
	onCancel: (flag?: boolean, formVals?: MenuFormData) => void;
	onSubmit: (values: MenuFormData) => Promise<any>;
	open: boolean;
	visibleOptions: DictValueEnum;
	id: number | undefined;
	statusOptions: DictValueEnum;
};

const MenuForm: React.FC<MenuFormProps> = props => {
	const formRef = useRef<ProFormInstance>();
	const [menuType, setMenuType] = useState<any>("M");
	const [iconSelectorOpen, setIconSelectorOpen] = useState<boolean>(false);
	const { visibleOptions, statusOptions, id, open, onSubmit = () => {}, onCancel = () => {} } = props;
	const [appId, setAppId] = useState<any>();
	// 初始化
	useEffect(() => {
		formRef?.current?.resetFields();
		if (id) {
			setFormValue(id);
		}
	}, [id]);
	// 表单赋值
	const setFormValue = (id: number) => {
		getMenu(id).then(data => {
			setMenuType(data?.menuType);
			formRef?.current?.setFieldsValue(data);
		});
	};
	const handleCancel = () => {
		onCancel();
	};
	const handleFinish = async (values: Record<string, any>) => {
		return onSubmit({
			...values,
			id: id ? id : undefined
		} as MenuFormData);
	};

	const prefix = useMemo(() => {
		return formRef?.current?.getFieldValue("icon")?.startsWith("icon-") ? (
			<IconFont type={formRef?.current?.getFieldValue("icon")} />
		) : (
			<Icon component={(antIcons as Record<string, any>)?.[formRef?.current?.getFieldValue("icon")]} />
		);
	}, [formRef?.current?.getFieldValue("icon")]);
	return (
		<DrawerForm
			width={700}
			title={id ? formTitle[1] : formTitle[0]}
			open={open}
			formRef={formRef}
			grid={true}
			layout="vertical"
			drawerProps={{
				destroyOnClose: true,
				onClose: () => {
					handleCancel();
				}
			}}
			onFinish={handleFinish}
		>
			<ProFormText
				name="menuName"
				colProps={{ md: 24, xl: 24 }}
				label="菜单名称"
				placeholder="请输入菜单名称"
				rules={[
					{
						required: true,
						message: "请输入菜单名称！"
					}
				]}
			/>
			<ProFormText
				name="i18nKey"
				colProps={{ md: 24, xl: 24 }}
				label="菜单国际化"
				placeholder="请输入菜单国际化"
				rules={[
					{
						required: true,
						message: "请输入菜单国际化！"
					}
				]}
			/>
			<ProFormSelect
				name="appId"
				fieldProps={{
					fieldNames: { label: "name", value: "key" }
				}}
				colProps={{ md: 24, xl: 24 }}
				label="所属应用"
				onChange={value => {
					setAppId(value);
				}}
				request={() => {
					return getAppList();
				}}
				// options={[
				// 	{
				// 		label: "系统应用",
				// 		value: 1
				// 	}
				// ]}
			/>
			<ProFormTreeSelect
				name="parentId"
				colProps={{ md: 24, xl: 24 }}
				label="上级菜单"
				fieldProps={{
					fieldNames: {
						label: "menuName",
						value: "id"
					}
				}}
				params={{ appId: appId }}
				request={params => {
					return getListByAppId(params).then((data: any) => {
						return data;
					});
				}}
				placeholder="请输入父菜单编号"
			/>

			<ProFormText
				colProps={{ md: 24, xl: 24 }}
				hidden={menuType === "F"}
				fieldProps={{
					readOnly: false,
					prefix: prefix,
					style: { cursor: "pointer" },
					onClick: () => {
						setIconSelectorOpen(true);
					}
				}}
				name="icon"
				label="菜单图标"
				placeholder="请输入菜单图标"
				rules={[
					{
						required: false,
						message: "请输入菜单图标！"
					}
				]}
			/>
			<ProFormDigit
				name="sort"
				label="显示顺序"
				colProps={{ md: 12, xl: 12 }}
				placeholder="请输入显示顺序"
				rules={[
					{
						required: false,
						message: "请输入显示顺序！"
					}
				]}
				fieldProps={{
					defaultValue: 1
				}}
			/>
			<ProFormSelect
				colProps={{ md: 12, xl: 12 }}
				name="menuType"
				valueEnum={{
					M: "目录",
					C: "菜单"
				}}
				label="菜单类型"
				placeholder="请输入菜单类型"
				fieldProps={{
					defaultValue: "M"
				}}
				onChange={value => {
					setMenuType(value ? value : "M");
				}}
			/>
			<ProFormSelect
				name="isLink"
				valueEnum={{
					0: "是",
					1: "否"
				}}
				initialValue="1"
				label="是否为外链"
				colProps={{ md: 12, xl: 12 }}
				placeholder="请输入是否为外链"
				rules={[
					{
						required: false,
						message: "请输入是否为外链!"
					}
				]}
				fieldProps={{
					defaultValue: "1"
				}}
			/>
			<ProFormSelect
				name="visible"
				valueEnum={visibleOptions}
				label="是否可见"
				colProps={{ md: 12, xl: 12 }}
				placeholder="请选择是否可见"
				fieldProps={{
					defaultValue: "0"
				}}
			/>
			<ProFormRadio.Group
				valueEnum={statusOptions}
				name="status"
				label="菜单状态"
				radioType="button"
				colProps={{ md: 24, xl: 24 }}
				placeholder="请输入菜单状态"
				fieldProps={{
					defaultValue: "0"
				}}
			/>
			<ProFormText
				name="path"
				label="路由地址"
				width="lg"
				colProps={{ md: 24, xl: 24 }}
				placeholder="请输入路由地址"
				rules={[
					{
						required: menuType !== "F",
						message: "请输入路由地址"
					}
				]}
			/>

			{menuType === "C" && (
				<ProFormText
					name="component"
					label="组件路径"
					colProps={{ md: 24, xl: 24 }}
					placeholder="请输入组件路径"
					rules={[
						{
							required: false,
							message: "请输入组件路径！"
						}
					]}
				/>
			)}

			{menuType === "C" && (
				<ProFormText
					name="query"
					label="路由参数"
					colProps={{ md: 24, xl: 24 }}
					placeholder="请输入路由参数"
					rules={[
						{
							required: false,
							message: "请输入路由参数！"
						}
					]}
				/>
			)}
			{menuType === "C" && (
				<ProFormText
					name="perms"
					label="权限标识"
					colProps={{ md: 24, xl: 24 }}
					placeholder="请输入权限标识"
					rules={[
						{
							required: false,
							message: "请输入权限标识！"
						}
					]}
				/>
			)}
			<IconModal
				open={iconSelectorOpen}
				onChange={(key: string) => {
					formRef?.current?.setFieldsValue({ icon: key });
					setIconSelectorOpen(false);
				}}
				extendRender={{
					IconFont: IconFont,
					// @ts-ignore
					options: [{ label: "自定义", data: DIYIconList, key: "iconFont" }]
				}}
				cancel={() => {
					setIconSelectorOpen(false);
				}}
			/>
		</DrawerForm>
	);
};

export default MenuForm;
